import React from "react";
import {Button, Grid, InputAdornment, InputLabel, makeStyles, Paper, TextField} from "@material-ui/core";

import {Toolbar} from "../../../shared/components";

const useStyle = makeStyles(theme => ({
    paper: {padding: theme.spacing(3, 2)},
}));

const AddLaborCode = ({onClose, onConfirm}) => {
    const classes = useStyle();

    return (
        <Grid container spacing={4}>
            <Toolbar
                title="Add Parts Itemt"
                actions={
                    <React.Fragment>
                        <Button color="primary" variant="contained" onClick={onConfirm}>Add</Button>
                        <Button variant="contained" onClick={onClose}>Cancel</Button>
                    </React.Fragment>
                }
            />

            <Grid item xs={12}>
                <Paper elevation={2} className={classes.paper}>
                    <Grid container spacing={3} alignItems={"center"}>
                        <Grid item xs={2}><InputLabel htmlFor="laborCode">Labor Code</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="laborCode"
                                variant="outlined"
                                fullWidth
                            />
                        </Grid>

                        <Grid item xs={2}><InputLabel htmlFor="hourlyRate">Hourly Rate</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="hourlyRate"
                                variant="outlined"
                                fullWidth
                                InputProps={{startAdornment: <InputAdornment position="start">$</InputAdornment>}}
                            />
                        </Grid>

                        <Grid item xs={12}><InputLabel htmlFor="desc">Description</InputLabel></Grid>
                        <Grid item xs={12}>
                            <TextField
                                id="desc"
                                variant="outlined"
                                fullWidth
                                multiline rows={4}
                            />
                        </Grid>
                    </Grid>
                </Paper>
            </Grid>
        </Grid>
    );
};

export default AddLaborCode;
